<template>
  <view class="demo-container">
    <view class="page-header">
      <text class="title">门票卡片组件演示</text>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">正在加载门票数据...</text>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="error" class="error-container">
      <text class="error-text">{{ error }}</text>
      <button class="retry-button" @click="fetchTickets">重试</button>
    </view>
    
    <!-- 空数据状态 -->
    <view v-else-if="tickets.length === 0" class="empty-container">
      <text class="empty-text">暂无门票数据</text>
    </view>
    
    <!-- 门票列表 -->
    <view v-else class="tickets-wrapper">
      <ticket-item
        v-for="ticket in tickets"
        :key="ticket.ticketId"
        :ticketId="ticket.ticketId"
        :sightId="ticket.sightId"
        :price="ticket.price"
        :stock="ticket.stock"
        :desc="ticket.desc"
        :ticketType="ticket.ticketType"
        :sourceChannel="ticket.sourceChannel"
        :saleStartTime="ticket.saleStartTime"
        :saleEndTime="ticket.saleEndTime"
        :status="ticket.status"
        :createdAt="ticket.createdAt"
        :updatedAt="ticket.updatedAt"
        @buy="handleBuyTicket"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ticketItem from '@/components/ticket-item/ticket-item.vue';
import { ticketApi } from '@/common/api/ticket.js';

// 数据状态
const tickets = ref([]);
const loading = ref(false);
const error = ref('');

// 获取门票数据
const fetchTickets = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    // 调用API获取门票列表
    const response = await ticketApi.getTickets({
      sightId:1,
      page: 1,
      pageSize: 10
    });
    
    // 假设API返回的数据结构是 { data: { list: [...] } }
    // 根据实际API响应结构调整
    if (response.data && response.data.list) {
      tickets.value = response.data.list;
    } else if (Array.isArray(response.data)) {
      tickets.value = response.data;
    } else {
      // 如果没有数据，使用一些示例数据作为后备
      tickets.value = [
        {
          ticketId: 7,
          sightId: 6,
          price: 55,
          stock: 756,
          desc: "测试",
          ticketType: "child",
          sourceChannel: "official",
          saleStartTime: "2025-10-11T16:00:00.000Z",
          saleEndTime: "2025-10-28T16:00:00.000Z",
          status: "active",
          createdAt: "2025-10-13T07:05:08.000Z",
          updatedAt: "2025-10-13T07:05:08.000Z"
        },
        {
          ticketId: 8,
          sightId: 6,
          price: 98,
          stock: 320,
          desc: "标准成人票，包含景区所有开放景点",
          ticketType: "adult",
          sourceChannel: "official",
          saleStartTime: "2025-10-11T16:00:00.000Z",
          saleEndTime: "2025-10-28T16:00:00.000Z",
          status: "active",
          createdAt: "2025-10-13T07:05:08.000Z",
          updatedAt: "2025-10-13T07:05:08.000Z"
        }
      ];
    }
  } catch (err) {
    console.error('获取门票数据失败:', err);
    error.value = err.message || '获取门票数据失败，请稍后重试';
    
    // 错误时也显示一些示例数据，确保组件能正常展示
    tickets.value = [
      {
        ticketId: 7,
        sightId: 6,
        price: 55,
        stock: 756,
        desc: "测试",
        ticketType: "child",
        sourceChannel: "official",
        saleStartTime: "2025-10-11T16:00:00.000Z",
        saleEndTime: "2025-10-28T16:00:00.000Z",
        status: "active",
        createdAt: "2025-10-13T07:05:08.000Z",
        updatedAt: "2025-10-13T07:05:08.000Z"
      }
    ];
  } finally {
    loading.value = false;
  }
};

// 处理购票事件
const handleBuyTicket = (ticketInfo) => {
  console.log('购票信息:', ticketInfo);
  uni.showToast({
    title: `您已选择购买${ticketInfo.ticketType}票`,
    icon: 'success'
  });
};

// 页面加载时获取数据
onMounted(() => {
  fetchTickets();
});
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
}

.title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.tickets-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

// 加载状态样式
.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;
}

.loading-text,
.empty-text {
  font-size: 16px;
  color: #666;
}

.error-text {
  font-size: 16px;
  color: #f5222d;
  margin-bottom: 16px;
}

.retry-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 4px;
}

.retry-button:active {
  background-color: #40a9ff;
}
</style>